import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class WeChatPayPage extends StatelessWidget {
  List<Map<String, Object>> secondList = [
    {"title": "信用卡还贷", "icon": Icons.credit_card, "color": Color(0xff26A263)},
    {"title": "微粒贷借钱", "icon": Icons.credit_card, "color": Color(0xffC28946)},
    {"title": "理财通", "icon": Icons.credit_card, "color": Color(0xff028BC8)},
    {"title": "保险服务", "icon": Icons.credit_card, "color": Color(0xffC67C2B)}
  ];
  List<Map<String, Object>> threeList = [
    {"title": "手机充值", "icon": Icons.phone_android, "color": Color(0xff26A263)},
    {
      "title": "生活缴费",
      "icon": Icons.check_circle_outline,
      "color": Color(0xffC28946)
    },
    {"title": "Q币充值", "icon": Icons.phone_android, "color": Color(0xff028BC8)},
    {"title": "城市服务", "icon": Icons.phone_android, "color": Color(0xffC67C2B)},
    {"title": "腾讯公益", "icon": Icons.phone_android, "color": Color(0xffC67C2B)},
    {"title": "医疗健康", "icon": Icons.phone_android, "color": Color(0xffC67C2B)},
    {"title": "防疫健康码", "icon": Icons.phone_android, "color": Color(0xffC67C2B)},
  ];
  List<Map<String, Object>> fourList = [
    {"title": "出行服务", "icon": Icons.train_outlined, "color": Color(0xff26A263)},
    {
      "title": "火车票机票",
      "icon": Icons.train_outlined,
      "color": Color(0xffC28946)
    },
    {"title": "滴滴出行", "icon": Icons.train_outlined, "color": Color(0xff028BC8)},
    {"title": "酒店", "icon": Icons.train_outlined, "color": Color(0xffC67C2B)},
  ];

  WeChatPayPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("支付"),
      ),
      body: Container(
        color: const Color(0xFFBEBFBF),
        child: ListView(
          children: [
            _generateTopLayout(context),
            _generateSecondLayout(context, "金融理财", secondList),
            _generateSecondLayout(context, "生活服务", threeList),
            _generateSecondLayout(context, "交通出行", fourList),
          ],
        ),
      ),
    );
  }

  _generateTopLayout(context) {
    //Color(0xFF218C55)
    return Container(
      width: MediaQuery.of(context).size.width,
      height: 110,
      margin: const EdgeInsets.fromLTRB(5, 5, 5, 0),
      child: const Card(
        color: Color(0xFF218C55),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                SizedBox(
                  height: 15,
                ),
                Icon(
                  Icons.check_box_outlined,
                  color: Colors.white70,
                  size: 32,
                ),
                SizedBox(
                  height: 7,
                ),
                Text(
                  "收付款",
                  style: TextStyle(
                    color: Colors.white70,
                  ),
                )
              ],
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                SizedBox(
                  height: 15,
                ),
                Icon(
                  Icons.account_balance_wallet_rounded,
                  color: Colors.white70,
                  size: 32,
                ),
                SizedBox(
                  height: 7,
                ),
                Text(
                  "钱包",
                  style: TextStyle(color: Colors.white70, fontSize: 14),
                ),
                Text(
                  "￥0.74",
                  style: TextStyle(
                    color: Colors.white54,
                    fontSize: 12,
                  ),
                )
              ],
            )
          ],
        ),
      ),
    );
  }

  _generateSecondLayout(context, String title, List<Map<String, Object>> list) {
    return Container(
      width: MediaQuery.of(context).size.width,
      margin: const EdgeInsets.fromLTRB(5, 5, 5, 0),
      child: Card(
        color: Colors.white,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
                margin: const EdgeInsets.fromLTRB(10, 10, 0, 0),
                child: Text(
                  title,
                  style: const TextStyle(color: Color(0xff3F3F3F)),
                )),
            Container(
                margin: const EdgeInsets.fromLTRB(10, 30, 10, 10),
                child: GridView.count(
                    crossAxisSpacing: 10,
                    mainAxisSpacing: 10,
                    crossAxisCount: 4,
                    //设置以下两个参数，禁止GridView的滚动，防止与 ListView 冲突
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    children: _generateGridList(list)))
          ],
        ),
      ),
    );
  }

  _generateGridList(List<Map<String, Object>> list) {
    return list.map((e) => _generateGridItem(e)).toList();
  }

  Widget _generateGridItem(item) {
    return Column(
      children: [
        Icon(
          item["icon"],
          size: 30,
          color: item["color"],
        ),
        const SizedBox(
          height: 5,
        ),
        Text(
          item["title"],
          style: const TextStyle(fontSize: 13),
        )
      ],
    );
  }
}
